<template>
  <div class="login-warp">
    <Version ref="child" />
    <div class="top-title">大佛寺智能化综合管控平台</div>
    <div class="box">
      <div class="slogan">
        用户登录
      </div>
      <el-form ref="form" class="input-warp" :rules="rules" :model="loginInfo" label-width="0px">
        <el-form-item class="item-input" prop="username">
          <img src="@/assets/img/login/username.png" class="icon">
          <el-input v-model="loginInfo.username" placeholder="请输入登录ID" maxlength="20" @focus="getFocus('用户名')" @blur="loseBlur" />
        </el-form-item>
        <el-form-item class="item-input" prop="password">
          <img src="@/assets/img/login/password.png" class="icon">
          <el-input v-model="loginInfo.password" placeholder="请输入密码" show-password maxlength="20" @focus="getFocus('密码')" @blur="loseBlur" />
          <div v-if="showErr" class="el-form-item__error">请输入正确的账号或密码</div>
        </el-form-item>
        <el-form-item class="item-input code" prop="code">
          <div class="check-code">
            <img src="@/assets/img/login/code.png" class="icon">
            <el-input v-model="loginInfo.code" placeholder="请输入验证码" maxlength="4" @focus="getFocus('验证码')" @blur="loseBlur" />
          </div>
          <div class="canvas" @click="getRandomNum">
            {{ total }}
          </div>
        </el-form-item>
        <div class="submit" @click="submit">登录</div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Version from './Version.vue';

import { queryLogin } from '@/api/item/common';
export default {
  components: {
    Version
  },
  data() {
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
      if (value.split(' ').length !== 1) {
        return callback(new Error('输入存在空格，请重新输入'));
      } else {
        callback();
      }
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        this.showErr = false;
        return callback(new Error('密码不能为空'));
      } else {
        callback();
      }
    };
    const checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'));
      }
      if (Number(value) !== Number(this.num1 + this.num2)) {
        return callback(new Error('验证码错误，请重新输入'));
      } else {
        callback();
      }
    };
    return {
      loginInfo: {
        username: '',
        password: '',
        code: ''
      },
      isBlur: '',
      rules: {
        username: [
          { validator: checkUsername, trigger: 'blur', required: true }
        ],
        password: [
          { validator: checkPassword, trigger: 'blur', required: true }
        ],
        code: [
          { validator: checkCode, trigger: 'blur', required: true }
        ]
      },
      showErr: false,
      num1: null,
      num2: null,
      total: ''
    };
  },
  mounted() {
    this.getRandomNum();
  },
  methods: {
    async queryLogin() {
      const params = {
        password: this.loginInfo.password,
        platform: 'PC',
        account: this.loginInfo.username
      };
      const res = await queryLogin(params);

      if (res.data.code === 200) {
        const token = res.data.data.token;

        localStorage.setItem('token', token);

        this.$router.push('/load');
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.queryLogin();
          // this.$router.push('/load');
        } else {
          console.log('验证失败');
        }
      });
    },
    getFocus(val) {
      this.isBlur = val;
    },
    loseBlur() {
      this.isBlur = '';
    },
    getRandomNum() {
      this.num1 = Math.ceil(Math.random() * 10) + 0;
      this.num2 = Math.ceil(Math.random() * 10) + 0;
      this.total = this.num1 + '+' + this.num2 + '=?';
    }
  }
};
</script>
<style lang="scss" scoped>
.login-warp{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;

  background-image: url('../assets/img/login/login-bg.png');

  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  .top-title{
    padding-top: 3.125rem;
    width: 100%;
    height: 8rem;

    font-family: PingFang-SC-Medium;
    font-size: 3rem;
    color: $white;
    text-align: center;

    background-image: url('../assets/img/login/login-header.png');
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .box{
    margin: 0 auto;
    margin-top: 6.75rem;
    width: 37.5rem;
    height: 34.4375rem;

    text-align: center;

    background-image: url('~@/assets/img/login/login-form.png');
    background-size: cover;
    background-repeat: no-repeat;

    .slogan{
      margin-top: 3.25rem;
      font-size: 2rem;
      text-align: center;
      color: #fff;
      line-height: 2rem;
      padding: 4.375rem 0 2.1875rem;
    }
    .input-warp{
      margin: 0 auto;
      width: 26.4375rem;
      position: relative;

      .item-input{
        margin-top: 1.875rem;
        width: 100%;

        position: relative;
        .triangle1{
          position: absolute;
          bottom: .375rem;
          left: -5.3125rem;
        }
        .triangle2{
          position: absolute;
          bottom: .375rem;
          left: -3.9375rem;
        }
        &.code{
          position: relative;
          width: 15.25rem;
          height: 3.125rem;
          .canvas{
            position: absolute;
            left: 16.875rem;
            bottom: 0;

            width: 9.625rem;
            height: 3.125rem;

            line-height: 3.4375rem;
            text-align: center;
            font-size: 1.75rem;

            border: 1px solid #17366A;

            color: $lightGrey;
            background-color: #131E53;
            cursor: pointer;
          }
        }
        .icon{
          position: absolute;
          top: .9375rem;
          left: 1.25rem;
          z-index: 10;

          width: 1.125rem;
          height: 1.25rem;
        }
        .check-code{
          width: 15.25rem;
        }
      }
    }
    .submit{
      display: inline-block;

      margin-top: 2.5rem;
      width: 26.4375rem;
      height: 3.125rem;

      line-height: 3.125rem;
      text-align: center;
      font-size: 1.25rem;

      border-radius: .1875rem;
      background-color: $blue;
      color:$white;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.login-warp{
  input::-webkit-input-placeholder{
    color: rgba($color: #34C8FF, $alpha: 0.4);
  }

  input::-moz-placeholder{
      color: rgba($color: #34C8FF, $alpha: 0.4);
  }

  input::-ms-input-placeholder{
      color: rgba($color: #34C8FF, $alpha: 0.4);
  }
  .el-input__inner {
    padding-left: 3.625rem;
    height: 3.125rem;

    font-size: 1rem;

    color: #34C8FF;

    box-sizing: border-box;
    border-color: #17366A;
    background-color: #131E53 !important;
  }
  .el-form-item{
    margin-bottom: 0px;
  }

  .el-form-item__error{
    display: block;
  }
}
</style>
